<template>
  <div :class="[`nav-theme-${navTheme}`, `nav-layout-${navLayout}`]">
    <a-layout id="components-layout-demo-side" style="min-height: 100vh">
      <!-- 侧边栏 -->
      <a-layout-sider
        v-if="navLayout === 'left'"
        :theme="navTheme"
        :trigger="null" 
        collapsible 
        v-model="collapsed"
        width= '12.5rem' 
        style="position:relative"
      >
        <div class="logo">
          <img  src="@/assets/imgs/timg.jpg" alt="">
          <div v-if="!collapsed">北京凯迪克格兰云天大酒店</div>
        </div>
        <SliderMenu :theme="navTheme" :sliderColl="collapsed" @breadSend="breadGet" />
        <!-- 底部天择云系统 -->
        <div class="slider-bottom"> 
          <div style="margin-bottom:.5rem;">
            <img src="" alt="">
            <span>暮客云系统</span>
          </div>
          <div v-if="!collapsed">客服电话：0571-88292136</div>
        </div>
      </a-layout-sider>
      <a-layout>
        <!-- 头部 -->
        <a-layout-header :style="{ background: '#fff', padding: 0 }">
          <Header :iconColl="collapsed" @collStatus="updateCollapsed"/>
        </a-layout-header>
        <!-- 内容 -->
        <a-layout-content style="margin:0 10px">
          <!-- <div>{{basePath}}</div> -->
          <!-- 面包屑 -->
          <a-breadcrumb style="margin: .625rem 0">
            <a-breadcrumb-item  
              v-for="item in list" 
              :key="item.name"
            >
              <span v-if="item.src">
                <a :href="item.src">{{item.title}}</a>
              </span>
              <span v-else>{{item.title}}</span>
            </a-breadcrumb-item>
          </a-breadcrumb>
          <!-- <a-breadcrumb :routes="list">
            <template slot="itemRender" slot-scope="{route, params, routes, paths}">
              <h1>eee</h1>
              <h1>{{route}} ---- {{routes.length - 1}}》》》》》{{paths}}</h1>
              <span v-if="routes.indexOf(route) === routes.length - 1">
                {{route.title}}
              </span>
              <router-link v-else :to="`${basePath}/${paths.join('/')}`">
                {{route.breadcrumbName}}
              </router-link>
            </template>
          </a-breadcrumb> -->
          <router-view></router-view>
        </a-layout-content>
        <!-- 底部 -->
        <a-layout-footer style="text-align: center">
          <Footer />
        </a-layout-footer>
      </a-layout>
    </a-layout>
    <!-- <settingDrawer /> -->
  </div>
</template>
<script>
import Header from './Header'
import Footer from './Footer'
import SliderMenu from './SliderMenu'
import { menuList } from '@/utils/menuList'

// import SettingDrawer from '../components/SettingDrawer'
export default {
  components: {
    Header,
    Footer,
    SliderMenu,
    // SettingDrawer
  },
  data() {
    const { lang } = this.$route.params
    return {
      menuList,
      collapsed: false,
      // 面包屑层级列表
      basePath: `/${lang}/components/breadcrumb`,
      routess: [{
        path: 'index',
        breadcrumbName: '首页'
      }, {
        path: 'first',
        breadcrumbName: '首页1'
      }],
      list: []
    };
  },
  computed: {
    navTheme() {
      return this.$route.query.navTheme || 'dark'
    },
    navLayout() {
      return this.$route.query.navLayout || 'left'
    },
  },
  watch: {
    '$route':function (val) {
      this.list = this.breadGet(val.name)
      window.console.log(val.name, this.list)

     }
  },
  mounted() {
    window.window.console.log('layout......www', this.$route.name)
    // window.console.log(this.$router.options)
    window.console.log(this.menuList)
    this.list = this.breadGet(this.$route.name)
    window.console.log('analysis', this.list)
    
    
    
  },
  methods: {
    updateCollapsed(val) {
      this.collapsed = val;
      window.window.console.log('layout......',val)
    },
    // 面包屑
    breadGet(val) {
      let aaa = this.menuList.filter((item) => {
      // children列表下name为指定值的对象，如路由name为bbb，则返回{..., name:bbb}的对象
        let bbb;
        if(item.children) {
          bbb = item.children.find(data =>  data.name === val)
        }
        if(bbb) {
          // filter返回name为bbb的整个数组对象
          return item.children.includes(bbb)  //true
        }
      })
      let ccc ;
      this.menuList.forEach((item) => {
      // children列表下name为指定值的对象，如路由name为bbb，则返回{..., name:bbb}的对象
        let bbb;
        if(item.children) {
          bbb = item.children.find(data =>  data.name === val)
        }
        if(bbb) {
          window.console.log(bbb)
          ccc = bbb  
        }
      })
      // 去掉children属性
      // delete aaa[0]['children'];
      // 增加子项对象
      aaa.push(ccc);
      window.console.log('aaa',aaa, ccc)

      return aaa;
    },
    // 面包屑列表

  }
}
</script>
<style lang="less" scoped>
// 修改菜单背景颜色
/deep/ .ant-layout-sider-children {
  background: #1E2036;
}

.logo {
  font-size: 14px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 17px;
  img {
    margin: 8px 0 6px 0; 
    width: 25px;
    height: 25px;
    border-radius: 50%;
  }
}
.nav-theme-dark .logo{
  color: #fff;
}
.slider-bottom {
  span {
    font-size: 14px;
  }
  // border:1px solid red;
  font-size: 12px;
  position:absolute;
  bottom:0;
  width:100%;
  text-align:center;
  color: #8E8F9A;
  padding-bottom: 10px;
}
</style>